<template>
  <div class="fatherDiv">
    <!-- 输入框 -->
    <div>
      <div class="inputDiv">
        <input
          class="inputView"
          type="text"
          v-model="newTodo"
          @input="handleInput"
          placeholder="请输入内容"
        />
        <button class="queryBtn" @click="showDialogClick">搜索</button>
      
      </div>
    </div>
    <!-- 列表 -->
    <div>
      <ul>
        <TransitionGroup name="fade" tag="ul" class="container">
          <li
            v-for="(tag, index) in tags"
            :key="tag.id"
            :class="{ 'delete-tag': tag.deletable }"
            class="liLay"
          >
            {{ index +1}}. {{ tag.content }}
            <button @click="deleteTag(index, tag.content)">删除</button>
          </li>
        </TransitionGroup>
      </ul>
    </div>
    <my-dialog v-if="chidlOpen" :data-list="dataList" :chidl-open="chidlOpen" @closed="closedDialog"></my-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import MyDialog from "./MyDialog.vue";
import { nanoid } from 'nanoid';

export default {
  setup() {
    const newTodo = ref("");
    const tags = ref([]);
    const dataList = ref([]);
    const chidlOpen = ref(false);
    //防抖
    function debounce(fn, wait) {
      let timeout = null;
      wait = wait || 600;
      return function () {
        let that = this;
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(() => {
          fn.apply(that);
        }, wait);
      };
    }

    const handleInput = debounce(function () {
      if (newTodo.value) {
        const taskId = nanoid(); 
        tags.value.push({ content: newTodo.value, deletable: false ,id:taskId});
        newTodo.value = "";
      }
    }, 800);

    //删除
    const deleteTag = (index) => {
      tags.value.splice(index, 1);
    };

    //搜索，显示弹框
    const showDialogClick = () => {
      if (tags.value.length == 0) {
        alert("请添加标签");
      } else {
        dataList.value = tags.value;
        chidlOpen.value = true;
      }
    };

    //关闭弹框
    const closedDialog =()=>{
      chidlOpen.value = false;
    }

    // const data = reactive({
    //   businessAreaList: [], // 标签列表
    //   formData: {
    //     title: "标签搜索",
    //     bdmc: "",
    //   },
    //   showDialog: false
    // });

    return {
      newTodo,
      tags,
      handleInput,
      deleteTag,
      showDialogClick,
      dataList,
      chidlOpen,
      closedDialog
    };
  },
  components: {
    MyDialog,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fatherDiv {
  width: 50dvw;
  height: 80dvh;
  background-color: #a0f4f7;
  padding: 20px;
}
.inputDiv {
  padding-left: 20px;
  display: flex;
}
.inputView {
  width: 400px;
  min-height: 30px;
  padding-left: 10px;
  margin-right: 20px;
}
ul {
  padding-left: 0;
  height: 300px;
}

.liLay {
  margin-top: 8px;
  margin-bottom: 8px;
  list-style-type: none;
  width: 400px;
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin-left: 20px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  border-radius: 4px;
  align-items: center;
}

.queryBtn {
  margin-left: 20px;
}

.container {
  position: relative;
  padding: 0;
}

/*.item {
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border: 1px solid #666;
  box-sizing: border-box;
}*/

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}

</style>
